<template>
	<view style="padding-bottom: 130rpx;">
		<view class="formContainer">
			<uni-forms ref="form">
				<uni-forms-item label="调整类型" required>
					<uni-data-select v-model="reviewType" :localdata="reviewTypes" :clear="false"></uni-data-select>
				</uni-forms-item>
				<!-- 新增费用->费用项 -->
				<template v-if="reviewType == 1">
					<view v-for="(item, index) in tableData" :key="index" style="margin: 20rpx; 0">
						<!-- 费用项标题及操作按钮 -->
						<view class="flex-row-center-sb" style="margin-bottom: 20rpx;">
							<text style="font-size: 28rpx;color: #666;">{{ item.chargeProjectName }}</text>
							<block v-if="item.isRent == 1">
								<text style="font-size: 26rpx;color: #2879FF;" @click.stop="showRentDetail = !showRentDetail">
									日租金明细
								</text>
							</block>
							<block v-else>
								<view class="flex-row" v-if="item.canEdit != 1">
									<u-switch v-if="item.isOptional == 1" v-model="item.selected" size="20"></u-switch>
									<!-- 编辑按钮 -->
									<view
										v-if="item.canEdit == 3"
										style="margin-right: 20rpx;margin-left: 20rpx;"
										@click="editCostItem(2, index, item)"
									>
										<u-icon name="edit-pen" color="#2879FF" size="24"></u-icon>
									</view>
									<!-- 删除按钮 -->
									<view v-if="item.canEdit == 3" @click="deleteCostItem(index)"><u-icon name="trash" color="#2879FF" size="24"></u-icon></view>
								</view>
							</block>
						</view>

						<uni-table ref="table" :loading="loading" border stripe>
							<uni-tr>
								<uni-th width="100" align="center"><text style="color: #2879FF;">单价</text></uni-th>
								<uni-th width="100" align="center"><text style="color: #2879FF;">数目</text></uni-th>
								<uni-th width="100" align="center"><text style="color: #2879FF;">费用</text></uni-th>
							</uni-tr>
							<uni-tr>
								<uni-td align="center">{{ item.unitPrice }}{{ item.chargeItemsType | chargeItemsType }}</uni-td>
								<uni-td align="center">{{ item.number }}</uni-td>
								<uni-td align="center">{{ item.unitPrice * item.number }}</uni-td>
							</uni-tr>
						</uni-table>
					</view>

					<view class="flex-xy-center">
						<view class="flex-row-center addCost" @click="editCostItem(1)">
							<u-icon name="plus-circle" color="#fff"></u-icon>
							<text style="color: #fff;font-size: 26rpx;margin-left: 20rpx;">添加收费项</text>
						</view>
					</view>
				</template>
			</uni-forms>
		</view>

		<!-- 租金 -->
		<view class="boxContrainer" style="padding-bottom: 20rpx;" v-if="reviewType == 2 && costAdjustmentDetail.rentItemsVo && costAdjustmentDetail.rentItemsVo.length > 0">
			<view class="titlBox"><text class="title">租金</text></view>
			<!-- 费用项 -->
			<view v-for="(item, index) in costAdjustmentDetail.rentItemsVo" :key="item.id" style="margin: 20rpx; 0">
				<!-- 普通收费项 -->
				<template v-if="item.isRent == 1 || item.isRent == 2">
					<view class="flex-row-center-sb" style="margin-bottom: 20rpx;">
						<text style="font-size: 28rpx;color: #666;">{{ item.chargeProjectName }}</text>
					</view>

					<uni-table ref="table" :loading="loading" border stripe>
						<uni-tr>
							<uni-th width="100" align="center"><text style="color: #2879FF;">单价</text></uni-th>
							<uni-th width="100" align="center"><text style="color: #2879FF;">数目</text></uni-th>
							<uni-th width="100" align="center"><text style="color: #2879FF;">费用</text></uni-th>
						</uni-tr>
						<uni-tr>
							<uni-td align="center">{{ item.unitPrice }}{{ item.chargeItemsType | chargeItemsType }}</uni-td>
							<uni-td align="center">{{ item.number }}</uni-td>
							<uni-td v-if="item.isRent == 1" align="center">
								<uni-easyinput
									v-model.number="item.chargeMoney"
									:clearable="false"
									type="number"
									:placeholder="item.chargeMoney"
									@change="changeRent"
								></uni-easyinput>
							</uni-td>
							<uni-td v-else align="center">{{ item.chargeMoney }}</uni-td>
						</uni-tr>
					</uni-table>
				</template>
				<!-- 优惠金额 -->
				<template v-else>
					<uni-forms-item label="优惠金额" labelWidth="90">
						<u--input
							v-model.number="item.chargeMoney"
							:disabled="item.isRent == 3"
							:placeholder="item.chargeMoney"
							inputAlign="right"
						></u--input>
					</uni-forms-item>
				</template>
			</view>
			<view class="costItem flex-row-center-sb" style="position: relative;top:-20rpx">
				<text style="color: #666;">租金合计</text>
				<text>¥{{ totalRentCost }}</text>
			</view>
		</view>

		<!-- 续租 -->
		<view class="boxContrainer" style="padding-bottom: 20rpx;" v-if="reviewType == 2 && costAdjustmentDetail.renewalItemsVo && costAdjustmentDetail.renewalItemsVo.length > 0">
			<view class="titlBox"><text class="title">续租</text></view>
			<view v-for="(item, index) in costAdjustmentDetail.renewalItemsVo" :key="item.id" style="margin: 20rpx; 0">
				<!-- 费用项标题及操作按钮 -->
				<view class="flex-row-center-sb" style="margin-bottom: 20rpx;">
					<text style="font-size: 28rpx;color: #666;">{{ item.chargeProjectName }}</text>
				</view>

				<uni-table ref="table" :loading="loading" border stripe>
					<uni-tr>
						<uni-th width="100" align="center"><text style="color: #2879FF;">单价</text></uni-th>
						<uni-th width="100" align="center"><text style="color: #2879FF;">数目</text></uni-th>
						<uni-th width="100" align="center"><text style="color: #2879FF;">费用</text></uni-th>
					</uni-tr>
					<uni-tr>
						<uni-td align="center">{{ item.unitPrice }}{{ item.chargeItemsType | chargeItemsType }}</uni-td>
						<uni-td align="center">{{ item.number }}</uni-td>
						<uni-td v-if="item.isRent == 1" align="center">
							<uni-easyinput
								v-model.number="item.chargeMoney"
								:clearable="false"
								type="number"
								:placeholder="item.chargeMoney"
							></uni-easyinput>
						</uni-td>
						<uni-td v-else align="center">{{ item.chargeMoney }}</uni-td>
					</uni-tr>
				</uni-table>
			</view>

			<view class="costItem flex-row-center-sb">
				<text style="color: #666;">租金合计</text>
				<text>¥{{ totalRenewalCost }}</text>
			</view>
		</view>

		<!-- 新增收费项弹框 -->
		<u-popup :show="showEditCost" mode="bottom" @close="showEditCost = false" closeable round="12">
			<view class="flex-colum-center" style="padding: 40rpx 24rpx 20rpx;">
				<view style="margin-bottom: 30rpx;">{{ popTitleType == 1 ? '新增' : '编辑' }}收费项</view>
				<uni-forms ref="form">
					<uni-forms-item label="收费项名称" labelWidth="90" required>
						<view>
							<u--input
								v-model="customCost.chargeProjectName"
								:disabled="customCost.canEdit != 3"
								placeholder="请输入收费项名称"
							></u--input>
						</view>
					</uni-forms-item>

					<uni-forms-item label="收费类型" required>
						<uni-data-checkbox
							v-model="customCost.chargeItemsType"
							:disabled="customCost.canEdit != 3"
							:localdata="chargeItemsTypes"
							@change="changeType"
						/>
					</uni-forms-item>

					<uni-forms-item label="单价" type="number" labelWidth="90" required>
						<view>
							<u--input v-model="customCost.unitPrice" @input="check" type="digit" placeholder="请输入单价"></u--input>
						</view>
					</uni-forms-item>

					<uni-forms-item label="数目" labelWidth="90" required>
						<view>
							<u--input
								v-model="customCost.number"
								type="number"
								:disabled="customCost.chargeItemsType == 2 ? true : false"
								placeholder="请输入数量"
							></u--input>
						</view>
					</uni-forms-item>

					<uni-forms-item label="费用合计" labelWidth="90">
						<view>
							<text style="position: relative;top: 15rpx;">{{ customCost.number * customCost.unitPrice || '0' }}</text>
						</view>
					</uni-forms-item>
				</uni-forms>

				<view class="commitBtn" @click="commitCost">提交</view>
			</view>
		</u-popup>

		<button type="info" class="sub-btn" @click="confim">确认</button>
	</view>
</template>

<script>
import * as orderApi from '@/api/order-api.js';
export default {
	data() {
		return {
			orderNo: '',
			showEditCost: false,
			showRentDetail: false, //日租金明细
			tableData: [],
			currentEditCostIndex: -1,
			popTitleType: 1,
			customCost: {
				chargeProjectName: 0,
				chargeMoney: '',
				chargeItemsType: 1,
				canEdit: 3,
				number: '',
				unitPrice: '',
				isRent: 2
			},
			// 订单费用明细
			costAdjustmentDetail: {
				rentItemsVo:[],
				renewalItemsVo:[]
				
			},
			chargeItemsTypes: [
				{
					value: 1,
					text: '按次'
				},
				{
					value: 2,
					text: '按天'
				},
				{
					value: 3,
					text: '按里程'
				},
				{
					value: 6,
					text: '按个'
				}
			],
			//当前调整类型
			reviewType: 1,
			//调整类型数据源
			reviewTypes: [],
			orderInfo:{}
		};
	},
	computed: {
		totalRentCost() {
			let total = 0;
			if (this.costAdjustmentDetail.rentItemsVo.length > 0) {
				this.costAdjustmentDetail.rentItemsVo.map(item => {
					if (item.isRent == 1 || item.isRent == 2) {
						item.unitPrice = (Number(item.chargeMoney) / item.number).toFixed(2);
						total += Number(item.chargeMoney);
					} else {
						total -= Number(item.chargeMoney);
					}
				});
			}
			return total;
		},
		totalRenewalCost() {
			let total = 0;
			if (this.costAdjustmentDetail.renewalItemsVo.length > 0) {
				this.costAdjustmentDetail.renewalItemsVo.map(item => {
					item.unitPrice = (Number(item.chargeMoney) / item.number).toFixed(2);
					total += Number(item.chargeMoney);
				});
			}
			return total;
		}
	},

	onLoad(option) {
		const item = JSON.parse(decodeURIComponent(option.item));
		console.log('订单信息', item);
		this.orderNo = item.orderNo;
		this.orderInfo = item;
		this.getCostAdjustmentDetail();
	},
	methods: {
		check(e) {
			//正则表达试
			e = e.match(/^\d*(\.?\d{0,2})/g)[0] || null;
			this.$nextTick(() => {
				this.customCost.unitPrice = e;
			});
		},
		// 查询订单费用明细
		getCostAdjustmentDetail() {
			orderApi.costAdjustmentDetail(this.orderNo).then(res => {
				this.costAdjustmentDetail = res.data;
				this.$set(this.costAdjustmentDetail, 'orderNo', this.orderNo);
				
				if(this.checkPermi(['order:orderBasic:newExpenses'])) {
					this.reviewTypes.push({
						value: 1,
						text: '新增费用'
					});
				}
				
				if (this.costAdjustmentDetail.canReduction && this.checkPermi(['order:orderBasic:addExpenses'])) {
					this.reviewTypes.push({
						value: 2,
						text: '租金减免'
					});
				}
			});
		},
		// 删除费用项
		deleteCostItem(index) {
			this.tableData.splice(index, 1);
		},

		// 添加或者编辑自定义费用项
		editCostItem(type, index, info) {
			this.popTitleType = type;
			if (type == 1) {
				//新增
				this.customCost = {
					canEdit: 3,
					chargeItemsType: 1
				};
			} else {
				//编辑
				this.customCost = info;
				this.currentEditCostIndex = index;
			}
			this.showEditCost = true;
		},
		//确定提交费用项
		commitCost() {
			if (uni.$u.test.isEmpty(this.customCost.chargeProjectName)) {
				uni.$u.toast('请输入费用项名称');
				return;
			} else if (uni.$u.test.isEmpty(this.customCost.unitPrice)) {
				uni.$u.toast('请输入单价');
				return;
			} else if (uni.$u.test.isEmpty(this.customCost.number)) {
				uni.$u.toast('请输入数目');
				return;
			} else if (this.customCost.number == '0') {
				uni.$u.toast('数目不能为0,请重新输入');
				return;
			} else {
				if (this.popTitleType == 1) {
					//新增
					this.customCost.chargeMoney = (Number(this.customCost.unitPrice) * Number(this.customCost.number)).toFixed(2);
					this.tableData.push(this.customCost);
					console.log(this.tableData);
				} else {
					//编辑
					this.tableData[this.currentEditCostIndex].chargeProjectName = this.customCost.chargeProjectName;
					this.tableData[this.currentEditCostIndex].unitPrice = this.customCost.unitPrice;
					this.tableData[this.currentEditCostIndex].number = this.customCost.number;
					this.tableData[this.currentEditCostIndex].chargeItemsType = this.customCost.chargeItemsType;
					this.tableData[this.currentEditCostIndex].canEdit = this.customCost.canEdit;
					this.tableData[this.currentEditCostIndex].chargeMoney = (
						Number(this.customCost.unitPrice) * Number(this.customCost.number)
					).toFixed(2);
					this.tableData[this.currentEditCostIndex].isRent = this.customCost.isRent;
				}

				this.showEditCost = false;
			}
		},
		changeType(e) {
			console.log(e);
			if (e.detail.value == 2) {
				this.customCost.number = this.orderInfo.leaseDays;
			}
		},
		// 确认
		confim() {
			if (uni.$u.test.isEmpty(this.tableData) && this.reviewType == 1) {
				//新增收费项
				uni.$u.toast('请添加收费项');
				return;
			} else {
				uni.showModal({
					title: '提示',
					content: '确定调整租金吗?',
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							if (this.reviewType == 1) {
								//新增收费项
								this.addNewCost();
							} else if (this.reviewType == 2) {
								//租金减免
								this.rentMitigate();
							}
						}
					}
				});
			}
		},
		// 新增收费项
		addNewCost() {
			orderApi
				.addNewExpenses({
					orderNo: this.orderNo,
					chargeItemsVo: this.tableData
				})
				.then(res => {
					uni.$emit('refreshOrder');
					this.$u.toast('租金调整成功');
					uni.navigateBack({
						animationDuration: 300
					});
				});
		},
		//租金减免
		rentMitigate() {
			if(this.totalRentCost < 0){
				this.$u.toast('租金合计不能小于0');
				return
			}else {
				orderApi.costAdjustment(this.costAdjustmentDetail).then(res => {
					uni.$emit('refreshOrder');
					this.$u.toast('租金调整成功');
					uni.navigateBack({
						animationDuration: 300
					});
				});
			}
			
		}
	}
};
</script>

<style lang="scss" scoped>
.formContainer {
	margin: 20rpx 20rpx 0;
	padding: 24rpx;
	background-color: #fff;
	// box-shadow: 0px 4rpx 16rpx 0px rgba(1, 10, 18, 0.1);
	border-radius: 16rpx;
}

.addCost {
	margin: 32rpx 0;
	box-sizing: border-box;
	padding-left: 30rpx;
	width: 242rpx;
	height: 60rpx;
	background: #1673ff;
	border-radius: 30rpx;
}

.payCostItem {
	height: 80rpx;
	width: 600rpx;
	border-bottom: 1rpx solid #ededed;
	font-size: 28rpx;
	color: #333;
}

.commitBtn {
	background-color: #1673ff;
	border-radius: 12rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	color: #fff;
	width: 300rpx;
	margin-top: 30rpx;
}

.costItem {
	padding: 0 24rpx;
	font-size: 28rpx;
	color: #333;
}
</style>
